<%--
  Created by IntelliJ IDEA.
  User: Tsuki
  Date: 2023-07-12
  Time: 13:59
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://wego.com/format" prefix="f" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/showBigImage.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css" media="all">
    <style>
        img {
            max-width: 200px; /* 设置图片最大宽度 */
            max-height: 200px; /* 设置图片最大高度 */
        }

    </style>
</head>

<body>

<div class="layuimini-container ">
    <div class="layuimini-main">
        <form class="layui-form " action="">

            <%--商品编号--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品编号:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input" value="${goods.id}" readonly>
                </div>
            </div>

            <%--商品名称--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input" value="${goods.name}" readonly>
                </div>
            </div>

            <%--商品状态--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品状态:</label>
                <div class="layui-input-block">
                    <c:if test="${goods.state==1}">
                        <input type="text" name="projectName" lay-verify="required"
                               autocomplete="off" class="layui-input" value="已上架" readonly>
                    </c:if>
                    <c:if test="${goods.state==0}">
                        <input type="text" name="projectName" lay-verify="required"
                               autocomplete="off" class="layui-input" value="已下架" readonly>
                    </c:if>
                </div>
            </div>

            <%--创建时间--%>
            <div class="layui-form-item">
                <label class="layui-form-label">创建时间:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input"
                           value="${f:formatLocalDateTime(goods.createTime, 'yyyy-MM-dd HH:mm:ss')}" readonly>
                </div>
            </div>

            <%--更新时间--%>
            <div class="layui-form-item">
                <label class="layui-form-label">更新时间:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input"
                           value="${f:formatLocalDateTime(goods.updateTime, 'yyyy-MM-dd HH:mm:ss')}" readonly>
                </div>
            </div>

            <%--商品主图--%>
            <div class="layui-form-item ">
                <label class="layui-form-label">商品主图:</label>
                <div class="layui-input-block" style="padding-left: 10px">
                    <img src="${IMG_SERVER}/goods/${goods.pic}" onclick="showBigImage(this)"
                         style="width: 10% ; height: 20%"
                         class="goodsPic">
                </div>
            </div>

            <%--商品图集--%>
            <div class="layui-form-item ">
                <label class="layui-form-label">商品图集:</label>
                <div class="imgs" style="display:flex">
                    <c:set var="imgs" value="${fn:split(goods.imgs,',')}"/>
                    <c:forEach items="${imgs}" var="img">
                        <div class="" style="padding-left:10px">
                            <img src="${IMG_SERVER}/goods/${img}" onclick="showBigImage(this)"
                                 style="width: 100% ; height: 100%;display: inline-block"
                                 class="goodsPic">
                        </div>
                    </c:forEach>
                </div>
            </div>

            <%--市场价格--%>
            <div class="layui-form-item">
                <label class="layui-form-label">市场价格:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input" value="${goods.price1} 元" readonly>
                </div>
            </div>

            <%--会员价格--%>
            <div class="layui-form-item">
                <label class="layui-form-label">会员价格:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input" value="${goods.price2} 元" readonly>
                </div>
            </div>

            <%--库存--%>
            <div class="layui-form-item">
                <label class="layui-form-label">库存:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input" value="${goods.storage}" readonly>
                </div>
            </div>

            <%--单位--%>
            <div class="layui-form-item">
                <label class="layui-form-label">单位:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input" value="${goods.unit}" readonly>
                </div>
            </div>

            <%--卖点--%>
            <div class="layui-form-item">
                <label class="layui-form-label">卖点:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input" value="${goods.sellingPoint}" readonly>
                </div>
            </div>

            <%--优先级--%>
            <div class="layui-form-item">
                <label class="layui-form-label">优先级:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required"
                           autocomplete="off" class="layui-input" value="${goods.priority}" readonly>
                </div>
            </div>

            <%--商品简介--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品简介:</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" readonly> ${goods.info}</textarea>
                </div>
            </div>

            <%--商品规格--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品规格</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" id="specsTd" readonly> ${goods.specs}</textarea>
                </div>
            </div>


        </form>
    </div>
</div>
<script>
    $(function () {
        let json = JSON.stringify(${goods.specs}, null, "\t");
        $("#specsTd").html(json);
    })
</script>
</body>
</html>
